<template>
  <div>
    <ul class="game_list" v-show="couponList">
      <li v-for="(item, index) in couponList" :key="index">
        <div class="game_coupon">
          <div><span>¥</span>{{ item.amount }}</div>
          <span>{{ item.use_cdt }}</span>
        </div>
        <div class="game_info">
          <span class="game_info_list">{{ item.coupon_name }}</span>
          <span class="game_date">{{ item.expiry }}</span>
          <div class="game_used">
            <span>{{ item.range }}</span>
            <span @click="showClick(index)">使用方法></span>
          </div>
        </div>
        <div class="icon_coupon">代金券</div>
      </li>
    </ul>
    <div v-show="!couponList" class="jynone">
      <img src="../../../../assets/img/server/jy_none1.png" alt="">
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  props: {
    couponList: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
    };
  },
  methods: {
    showClick(index) {
      this.$emit('expired-click', index)
    },
  },
}
</script>

<style scoped>
.game_list {
  box-sizing: border-box;
  width: 100%;
  padding: 0 .426667rem .4rem;
}

.game_list li {
  position: relative;
  margin-top: .133333rem;
  display: flex;
  width: 100%;
  height: 2.4rem;
  background: #ffffff;
  background-image: url("../../../../assets/img/server/icon_overdue.png");
  background-size: 100%;
  overflow: hidden;
  border-radius: .266667rem;
  box-shadow: 0 0 .08rem 0 rgba(0, 0, 0, 0.1);
}

.game_list li:first-child {
  margin-top: 0;
}

.game_coupon {
  width: 2.8rem;
  height: 2.4rem;
  background: #cccccc;
  border-radius: .266667rem 0 0 .266667rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #ffffff;
}

.game_coupon div {
  font-size: .96rem;
  font-weight: bold;
}

.game_coupon div span {
  font-size: .346667rem;
}

.game_coupon span {
  font-size: .373333rem;
}

.game_info {
  display: flex;
  flex-direction: column;
  font-size: .32rem;
  margin: .4rem 0 0 .133333rem;
}

.game_info_list {
  font-size: .346667rem;
  color: #999999;
  font-weight: bold;
  width: 6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.game_date {
  margin-top: .4rem;
  margin-left: .266667rem;
  color: #999999;
}

.game_used {
  margin-left: .266667rem;
  margin-top: .133333rem;
  font-weight: 0;
  font-size: .32rem;
  color: #999999;
  width: 5.72rem;
  display: flex;
  justify-content: space-between;
}

.game_used span:first-child {
  width: 4.133333rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.game_used span:last-child {
  color: #999999;
  text-decoration: underline;
}

.icon_coupon {
  position: absolute;
  right: -0.893333rem;
  top: .173333rem;
  width: 2.666667rem;
  height: .533333rem;
  background: #cccccc;
  font-size: .293333rem;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: .533333rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
</style>